<template>
    <div>
        <div style="width: 100%;display: flex;justify-content: center;">
          <div style="width: 1200px;">
            <div>
                <div style="display: flex;align-items: center;border-bottom: 1px solid #e6e6e6;padding: 20px 0;margin-top: 10px;">
                    <div style="height: 16px;width: 8px;background-color:#256aff;border-radius: 5px;margin-right: 10px;"></div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                      <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item> -->
                      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                      <el-breadcrumb-item>关于我们</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div style="display:flex;justify-content: center;flex-direction: column;font-size:26px;align-items: center;margin-top: 50px;">
                  <span style="text-align: center;font-weight: bold;color:#363636">关于我们</span>
                  <span style="font-size:14px;color:#c8c8c8;">About us</span>
                </div>
                <div style="margin: 50px 0">
                  <div v-html="companyInfo.companyIntroduce"></div>
                    <!-- <div style="display: flex;justify-content: space-between;">
                        <div style="width: 57%;">
                            <div style="font-size: 22px;position: relative;">
                                <div style="position: absolute;font-size: 50px;color: #eeefff;top: -30px;z-index: -100;">01</div>
                                <span style="margin-left: 20px;">{{ companyInfo.companyName }}</span>
                            </div>
                            <div style="font-size: 12px;color: #999;line-height: 20px;margin-top: 10px;">
                              {{ companyInfo.companyTitle }}
                            </div>
                        </div>
                        <div class="img" :style="{'backgroundImage':'url('+baseURL_dev+companyInfo.companyLogUrl+')'}"></div>
                    </div>
                    <div style="margin-top: 30px;">
                        <div style="font-size: 22px;position: relative;">
                                <div style="position: absolute;font-size: 50px;color: #eeefff;top: -30px;z-index: -100;">02</div>
                                <span style="margin-left: 20px;">{{ companyInfo.companyName }}的简介</span>
                            </div>
                            <div style="font-size: 12px;color: #999;line-height: 20px;margin-top: 10px;">
                              <div v-html="companyInfo.companyIntroduce"></div>
                            </div>
                    </div> -->
                </div>
            </div>
          </div>
        </div>
      <div style="width: 100%;">
        <!-- <div style="width: 1200px;"> -->
          <Foot />
        <!-- </div> -->
      </div>
    </div>
</template>

<script setup lang="ts">
import Foot from './foot.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted,ref,watch } from 'vue'
import { $CompanyInfo,$NavigationList } from '../api/api'
import { baseURL_dev } from '../config/baseUrl'
const input = ref('')
let companyInfo = ref({})
let nav = ref([])
onMounted(()=>{
  loadCompanyInfo()
})

const loadCompanyInfo = async ()=>{
  let ret = await $CompanyInfo()
  console.log(ret)
  companyInfo.value = ret.rows
  console.log('companyInfo',companyInfo.value)
//   nav.value = ret.rows
}
</script>

<style scoped>
.img{
  height: 400px;
  width: 40%;
  background-size: 100% 100%
}
</style>